/**
 * commonJS 写法
 * 因为所有模块都会导出一个对象，可使用一个变量接收
 */
// var snabbdom = require('snabbdom')

/**
 * requireJS 写法
 * 若没有使用 export default 导出，则不能直接用变量接收
 */
/* 注意：snabbdom 0.7.4 可以写为如下方式 */
// import { h, thunk, init } from 'snabbdom'

/* 注意：snabbdom 2.1.0 需写为如下方式 */
import { h } from 'snabbdom/build/package/h'
import { init } from 'snabbdom/build/package/init'
// import { thunk } from 'snabbdom/build/package/thunk' // 优化复杂视图

// console.log(h, init)

/**
 * 1. hello world
 * @param {*} 数组，模块
 * @return {function} patch函数，作用对比两个vnode的差异更新到真实DOM
 */
let patch = init([])
/**
 * 创建 vnode
 * @param {string} 标签+选择器
 * @param {*} 如果是字符串的话就表示设置标签中的内容
 * @return 返回虚拟dom
 */
let vnode = h('div#container.cls', 'Hello World')

// 获取要放值得元素
let app = document.querySelector('#app')
/**
 * 更新真实 dom，参数时两个 vnode
 * @param 可以是真实DOM元素，内部会把DOM元素转换成VNode
 * @param VNode 真实 Vnode
 * @return VNode
 */
let oldVnode = patch(app, vnode)

// 假设在某个时刻需从服务器获取新数据并重新赋值给 div
vnode = h('div', 'Hello Snabbdom')
// 对比两个 vnode 差异，并更新到 dom 中
patch(oldVnode, vnode)